---
title: crwdns61724:0crwdne61724:0
image: crwdns61732:0crwdne61732:0
---

<Frame>
  <img src="/images/user-guide/github/github-header.png" alt="Header" />
</Frame>

crwdns61736:0crwdne61736:0

<Tabs>

<Tab title="Usage">

```jsx
import { Chip } from 'twenty-ui/components';

export const MyComponent = () => {
  return (
    <Chip
      size="large"
      label="Clickable Chip"
      clickable={true}
      variant="highlighted"
      accent="text-primary"
      leftComponent
      rightComponent
      maxWidth="200px"
      className
    />
  );
};

```

</Tab>

<Tab title="Props">

| crwdns61740:0crwdne61740:0 | crwdns61744:0crwdne61744:0 | crwdns61748:0crwdne61748:0                                                            |
| ---------------------------------------------------------- | ---------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| crwdns61752:0crwdne61752:0 | crwdns61754:0crwdne61754:0 | crwdns61756:0crwdne61756:0                                                            |
| crwdns61758:0crwdne61758:0 | crwdns61760:0crwdne61760:0 | crwdns61762:0crwdne61762:0                                                            |
| crwdns61764:0crwdne61764:0 | crwdns61766:0crwdne61766:0 | crwdns61768:0crwdne61768:0                                                            |
| crwdns61770:0crwdne61770:0 | crwdns61772:0crwdne61772:0 | crwdns61774:0crwdne61774:0                                                            |
| crwdns61776:0crwdne61776:0 | crwdns61778:0crwdne61778:0 | crwdns61780:0crwdne61780:0 crwdns61782:0crwdne61782:0 |
| crwdns61784:0crwdne61784:0 | crwdns61786:0crwdne61786:0 | crwdns61788:0crwdne61788:0 crwdns61790:0crwdne61790:0 |
| crwdns61792:0crwdne61792:0 | crwdns61794:0crwdne61794:0 | crwdns61796:0crwdne61796:0 crwdns61798:0crwdne61798:0 |

</Tab>
</Tabs>

## crwdns61800:0crwdne61800:0

### crwdns61802:0crwdne61802:0

```jsx
import { Chip } from 'twenty-ui/components';

export const MyComponent = () => {
  return (
      <Chip 
      size="large"
      label="Transparent Disabled Chip"
      clickable={false}
      variant="rounded"
      accent="text-secondary"
      leftComponent
      rightComponent
      maxWidth="200px"
      className
      />    
  );
};

```

crwdns61804:0crwdne61804:0

### crwdns61806:0crwdne61806:0

```jsx
import { Chip } from "twenty-ui/components";
  
export const MyComponent = () => {
  return (
      <Chip 
      size="large"
      label="Disabled chip that triggers a tooltip when overflowing."
      clickable={false}
      variant="regular"
      accent="text-primary"
      leftComponent
      rightComponent
      maxWidth="200px"
      className
      />    
  );
};
```

## crwdns61808:0crwdne61808:0

crwdns61810:0crwdne61810:0

<Tabs>

<Tab title="Usage">

```jsx
import { BrowserRouter as Router } from 'react-router-dom';
import { IconTwentyStar } from 'twenty-ui/display';
import { Chip } from 'twenty-ui/components';

export const MyComponent = () => {
  return (
    <Router>
      <Chip
        linkToEntity="/entity-link"
        entityId="entityTest"
        name="Entity name"
        pictureUrl=""
        avatarType="rounded"
        variant="regular"
        LeftIcon={IconTwentyStar}
      />
    </Router>
  );
};
```

</Tab>

<Tab title="Props">

| crwdns61812:0crwdne61812:0 | crwdns61814:0crwdne61814:0 | crwdns61816:0crwdne61816:0                                                            |
| ---------------------------------------------------------- | ---------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| crwdns61818:0crwdne61818:0 | crwdns61820:0crwdne61820:0 | crwdns61822:0crwdne61822:0                                                            |
| crwdns61824:0crwdne61824:0 | crwdns61826:0crwdne61826:0 | crwdns61828:0crwdne61828:0                                                            |
| crwdns61830:0crwdne61830:0 | crwdns61832:0crwdne61832:0 | crwdns61834:0crwdne61834:0                                                            |
| crwdns61836:0crwdne61836:0 | crwdns61838:0crwdne61838:0 | crwdns61840:0crwdne61840:0                                                            |
| crwdns61842:0crwdne61842:0 | crwdns61844:0crwdne61844:0 | crwdns61846:0crwdne61846:0 crwdns61848:0crwdne61848:0 |
| crwdns61850:0crwdne61850:0 | crwdns61852:0crwdne61852:0 | crwdns61854:0crwdne61854:0 crwdns61856:0crwdne61856:0 |
| crwdns61858:0crwdne61858:0 | crwdns61860:0crwdne61860:0 | crwdns61862:0crwdne61862:0 crwdns61864:0crwdne61864:0 |

</Tab>
</Tabs>
